<%--
  Created by IntelliJ IDEA.
  User: liang
  Date: 2017/4/6
  Time: 16:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${ctx}/static/echarts/echarts.min.js"></script>
<script src="${ctx}/static/echarts/echarts-gl.min.js"></script>
<script src="${ctx}/static/echarts/theme/infographic.js"></script>
<script src="${ctx}/static/echarts/theme/macarons.js"></script>
<script src="${ctx}/static/echarts/theme/roma.js"></script>
<script src="${ctx}/static/echarts/theme/shine.js"></script>
<script src="${ctx}/static/echarts/theme/vintage.js"></script>

<script>
    (function ($) {
        //select2的opt
        $.fn.extend({
            // 基于准备好的dom，初始化echarts实例
            initEchart: function (options, theme) {
                var myChart = echarts.init($(this)[0], theme);
                // 指定图表的配置项和数据
                var defualtOpt = {};
                //替换传入参数
                var opts = $.extend(true, defualtOpt, options);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(opts);
                return myChart;
            },
            //title: 散点图名称， historyData: 历史数据， auditData： 待审核数据， xName： 横坐标名称， yName: 纵坐标名称
            initScatter: function (title, historyData, auditData, xName, yName) {
                var seriesOpt = [];
                var historyOpt = {
                    name: '历史数据',
                    type: 'scatter',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: historyData,
                    itemStyle: {
                        normal: {
                            color: '#85C3DA'
                        }
                    }
                    //markLine: markLineOpt
                }
                seriesOpt.push(historyOpt);
                for (var i = 0; i < auditData.length; i++) {
                    var auditOpt = {
                        name: '待审核数据',
                        type: 'scatter',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        z: 10,
                        itemStyle: {
                            normal: {
                                color: '#ffff00'
                            }
                        }

                    };
                    auditOpt.data = [auditData[i]];
                    auditOpt.itemStyle.normal.color = "#ff0000";
                    seriesOpt.push(auditOpt);
                }
                var option = {
                    title: {
                        text: title,
                        x: 'center',
                        y: 0
                    },
                    tooltip: {
                        formatter: '{a}: ({c})'
                    },
                    xAxis: [
                        {
                            name: xName,
                            nameLocation: 'middle',
                            gridIndex: 0,
                            min: 'dataMin',
                            max: 'dataMax',
                            nameGap: 20,
                            nameTextStyle: {
                                color: '#ff0000',
                                fontStyle: 'oblique',
                                fontWeight: 'bolder',
                                fontFamily: 'sans-serif',
                                fontSize: 16
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: yName,
                            nameLocation: 'middle',
                            gridIndex: 0,
                            min: 'dataMin',
                            max: 'dataMax',
                            nameGap: 50,
                            nameTextStyle: {
                                color: '#ff0000',
                                fontStyle: 'oblique',
                                fontWeight: 'bolder',
                                fontFamily: 'sans-serif',
                                fontSize: 16
                            }
                        }
                    ],
                    series: seriesOpt
                };
                $(this).initEchart(option);
            },
            //title: 饼图名称，historyData, auditData,
            initPiechart: function (title, auditData, historyData, seriesName, colorList) {
                var option = {
                    title: {
                        text: title,
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    color: colorList,
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: auditData
                    },
                    series: [
                        {
                            name: seriesName,
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: historyData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            }
                        }
                    ]
                };
                $(this).initEchart(option);
            },
            //嵌套环形图
            initDoughnut: function (title, auditData, historyData, seriesName, colorList) {
                var option = {
                    title: {
                        text: title,
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        show: false,
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    color: colorList,
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: auditData
                    },
                    series: [
                        {
                            name: seriesName,
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '70%'],
                            label: {
                                normal: {
                                    position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                            },
                            data: historyData
                        }
                    ]
                };
                $(this).initEchart(option);
            },

            //折线图
            initBrokenline: function (title, bdTitle, xData, yData, name, minValue, xMin, yMin) {
                var option = {
                    title: {
                        text: title,
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    series: [
                        {
                            name: bdTitle,
                            type: 'line',
                            data: yData,
                            markPoint: {
                                data: [
                                    {name: name, value: minValue, xAxis: xMin, yAxis: yMin}
                                ]
                            }
                        }
                    ]
                };
                $(this).initEchart(option);
            },
            initRbline: function (title, bdTitle, xData, yData, name, xName, yName) {
                var option = {
                    title: {
                        text: title,
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        name: xName,
                        type: 'category',
                        boundaryGap: false,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 9,
                            fontWeight: 'lighter'
                        },
                        data: xData
                    },
                    yAxis: {
                        name: yName,
                        type: 'value',
                        boundaryGap: false,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 10,
                            fontWeight: 'lighter'
                        },

                        axisLabel: {
                            formatter: '{value} ',
                            margin: 1
                        }
                    },
                    series: [
                        {
                            name: bdTitle,
                            type: 'line',
                            data: yData,
                            markPoint: {
                                data: [
                                    {name: name}
                                ]
                            }
                        }
                    ]
                };
                $(this).initEchart(option);
            },

            initLine: function (title, lDatas, xDatas, xName, yName, sDatas) {
                var option = {
                    title: {
                        text: title,
                        subtext: ''

                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: lDatas, // lDatas
                    },
                    xAxis: {
                        name: xName,
                        type: 'category',
                        boundaryGap: true,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 9,
                            fontWeight: 'lighter'
                        },
                        data: xDatas // xDatas
                    },
                    yAxis: {
                        name: yName,
                        type: 'value',
                        boundaryGap: false,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 10,
                            fontWeight: 'lighter'
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            margin: 1
                        }
                    },

                    series: sDatas
                };
                $(this).initEchart(option);
            },

            initTimeLine: function (title, lDatas, xDatas, xName, yName, sDatas) {
                var option = {
                    title: {
                        text: title,
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: lDatas, // lDatas
                    },
                    xAxis: {
                        name: xName,

                        type: 'category',
                        boundaryGap: true,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 9,
                            fontWeight: 'lighter'
                        },
                        data: xDatas // xDatas
                    },
                    yAxis: {
                        name: yName,
                        type: 'value',
                        boundaryGap: false,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 10,
                            fontWeight: 'lighter'
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            margin: 1
                        }
                    },

                    series: sDatas
                };
                $(this).initEchart(option);
            },
            initZktLine: function (title, lDatas, startTime, endTime, xName, yName, sn, sDatas, bzz, bqdd, scal, fgs) {

                bqdd = parseFloat(bqdd);
                bzz = parseFloat(bzz);
                fgs = fgs || 0.01;

                var max = bqdd + bzz;
                var min = bzz - bqdd;
                scal = scal || 2;

                var option = {
                    title: {
                        text: title,
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        show: false,
                        data: lDatas // lDatas
                    },
                    xAxis: {
                        name: xName,
                        nameLocation: 'middle',
                        nameGap: 30,
                        type: 'time',
                        splitNumber: sn,
                        min: startTime,
                        max: endTime,
                        boundaryGap: true,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 10,
                        },
                        maxInterval: 3600 * 24 * 1000,
                        axisLabel: {
                            formatter: function (value, index) {
                                // 格式化成月/日，只在第一个刻度显示年份
                                var date = new Date(value);

                                return date.getDate();
                            }
                        }
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        name: yName,
                        nameGap: 50,
                        nameLocation: 'middle',
                        type: 'value',
                        boundaryGap: false,//上下留白策略
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 10
                        },
                        axisLabel: {
                            formatter: function (value, index) {
                                return value.toFixed(scal);
                            },
                            margin: 1
                        },
                        max: max + 0.02,
                        min: min - 0.02,
                        interval: fgs
                    },

                    series: sDatas
                };
                return $(this).initEchart(option);
            }

        });
    })(window.jQuery);


</script>
